<template>
  <div>
    <!-- 搜索区域开始 -->
    
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-row>
          <el-col>
            <el-form-item>
              <el-input v-model="searchForm.projectName" placeholder="请输入工程名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchForm.deviceName" placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchForm.status" placeholder="请选择工单状态">
                <el-option label="待接单" value="待接单"></el-option>
                <el-option label="进行中" value="进行中"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.type" placeholder="请选择工单类型">
                <el-option label="维修" value="维修"></el-option>
                <el-option label="安装" value="安装"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getOrderData">搜索</el-button>
            </el-form-item>
          </el-col>
        <el-col>
    <!-- 表格创建  -->
          <el-table :data="orderData" stripe style="width: 100%">
            <el-table-column type="index" :index="1" label="序号" width="180" align="center">
            </el-table-column>
            <el-table-column prop="engineer_name" label="工程名称" width="180" align="center">
            </el-table-column>
            <el-table-column prop="device_name" label="设备名称" align="center">
            </el-table-column>
            <el-table-column prop="bill_why" label="问题描述" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template v-slot="scope">
                <div>
                  <el-tag v-if="scope.row.status == '已完成'">已完成</el-tag>
                  <el-tag v-else-if="scope.row.status == '进行中'" type="warning">进行中</el-tag>
                  <el-tag v-else type="danger">待接单</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="工单类型" align="center">
              <template v-slot="scope">
                <div>
                  <el-tag v-if="scope.row.type == '维修'">维修</el-tag>
                  <el-tag v-else type="warning">安装</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" align="center">
              <template v-slot="scope">
                <div>
                  <el-link :underline="false" type="success">
                    <el-button type="text" @click="toBind(scope.row)">详情</el-button>
                    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                      <div class="block">
                        <span class="demonstration">Click 指示器触发</span>
                        <el-carousel trigger="click" height="150px">
                          <el-carousel-item v-for="item in 4" :key="item">
                            <h3 class="small">{{item}}</h3>
                          </el-carousel-item>
                        </el-carousel>
                       </div>
                
                      <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                      </span>
                    </el-dialog>
                  </el-link>
                  <el-link @click="toClose(scope.row.id)"
                    :disabled="scope.row.status == '待接单' || scope.row.status == '进行中'" :underline="false"
                    type="success"></el-link>
                  <el-link @click="toCancel(scope.row.id)"
                    :disabled="scope.row.status == '已完成' || scope.row.status == '进行中'" :underline="false"
                    type="success">取消</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <!--第三行,分页 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="params.page" :page-sizes="[5, 10, 20, 30]" :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
        </el-row>
      </el-form>
  </div>
</template>


<script>
import { get, del } from '@/utils/request'
export default {
  data() {
    return {
      // 提供表单数据对象 --->条件对象 
      form: {},
      // 设备数据 
      deviceData: [],
      params: {
        page: 1,
        pageSize: 10
      },
      searchForm:{},
      total: 0,
      activeNames: ['1'],
      orderData: [],
      dialogVisible: false
    }
  },
  methods: {

    getOrderData(){

    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getDevData();

    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getDevData();
    },
    toSearch() {
      this.params.page = 1;
      this.getDevData();
    },
    async getWorkerData() {
      let res = await get('/workorder/pageQuery', this.params);
      console.log(res, '9999');
      this.orderData = res.data.list;
      // this.total = res.data.total;
    },
    toCancel(id) {
      console.log(id);
      this.$confirm('此操作将取消该工程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {//点了确定按钮 发起删除工程的请求
        let res = await get('/workorder/cancelOrder', { id });
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        //重新载入数据
        this.params.page = 1;//重第一页载入
        this.getDevData();
      }).catch(() => {//取消
        this.$message({
          type: 'info',
          message: '已取消接单'
        });
      });
    },

    toClose(id) {
      console.log(id);
      this.$confirm('此操作将永久删除该工程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {//点了确定按钮 发起删除工程的请求
        let res = await del('/workorder/deleteById', { id });
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        //重新载入数据
        this.params.page = 1;//重第一页载入
        this.getDevData();
      }).catch(() => {//取消
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

    toBind(row) {
      // 跳转到工程详情页面 编程式路由导航 
      this.$router.push({
        path: '/am/order/Details?id',
        query: row
      })

    },

    async getDevData() {
      let temp = {
        ...this.form,
        ...this.params
      };
      let res = await get('/workorder/pageQuery', temp);
      // console.log(res, '获取设备响应');
      this.orderData = res.data.list;
       this.total = res.data.total;
    },
    handleChange(val) {
      console.log(val);
    }
  },
  created() {
    this.getDevData();
    // this.getWorkerData();
  }

}
</script>